<style lang="less" scoped>
.first-login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;

  .first-login-content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    .content-wrapper {
      margin-top: 72px;
      .user-info-bg {
        width: 600px;
        height: 96px;
        border-radius: 8px;
        background-color: rgba(241, 241, 241, 1);
        display: flex;
        align-items: center;
        padding-left: 40px;
      }
      .user-info {
        .user-info-bg;
      }
      .form-input {
        width: 462px;
        border-radius: 16px;
        background-color: rgba(241, 241, 241, 1);
        font-size: 28px;
        border: none;
        margin-bottom: 0;
        line-height: normal;
        padding: 0 0 0 6px;
      }
      .marginBottom38 {
        margin-bottom: 38px;
      }
      .user-info-pwd-message {
        position: relative;
        .user-info-bg;
        .form-input {
          width: 240px;
        }
        .text {
          font-size: 32px;
          font-weight: 400;
          color: rgba(61, 60, 60, 1);
        }
        .get-validate-code {
          position: absolute;
          right: 32px;
          width: 128px;
          height: 56px;
          line-height: 56px;
          border-radius: 4px;
          background-color: rgba(81, 104, 255, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 30px;
          margin: 0;
          padding: 0;
          text-align: center;
          vertical-align: text-bottom !important;
        }
      }
      input::-webkit-input-placeholder {
        color: #aab2bd;
      }
      .set-pwd-btn {
        margin-top: 86px;
        width: 600px;
        height: 96px;
        border-radius: 8px;
        background-color: #536dfe;
        box-shadow: 0px 5px 12px 0px rgba(83, 109, 254, 0.44);
        line-height: 66px;
        color: rgba(255, 255, 255, 1);
        font-size: 36px;
      }

      .desc {
        margin-bottom: 30px;
        font-size: 24px;
        color: rgba(61, 60, 60, 1);
      }

      .message {
        margin-top: 326px;
        width: 478px;
        height: 231px;
        background: url("../../assets/CombinedShape-2.png") no-repeat;
        background-size: 478px 231px;
        padding: 72px 18px 40px 40px;
        margin-left: 60px;
        text-align: left;
        font-size: 28px;
        line-height: 40px;
        color: rgba(61, 60, 60, 1);
        div {
          width: 420px;
        }
      }
    }
  }
}
</style>

<template>
  <div class="first-login">
    <header-bar
      center-color="#3D3C3C"
      left-color="#536DFE"
      bg-color=""
    >
      <span slot="title">设置新密码</span>
    </header-bar>

    <div class="first-login-content">
      <div class="content-wrapper">
        <div class="desc">
          请先获取短信验证码。您的手机号{{ phone }}
        </div>
        <div class="user-info-pwd-message ">
          <span class="text">短信验证码</span>
          <input
            v-model="validateCode"
            type="number"
            placeholder="输入验证码"
            class="form-input"
            maxlength="6"
            pattern="\d*"
            oninput="if(value.length>6)value=value.slice(0,6)"
          >
          <button
            class="get-validate-code"
            @tap="getValidateCode"
          >
            <span v-show="sendAuthCode">获取</span>
            <span v-show="!sendAuthCode">{{ auth_time }}s</span>
          </button>
        </div>
        <button
          class="set-pwd-btn"
          @tap="next"
        >
          下一步
        </button>
        <div class="message">
          <div>提示：您已经被{{ deptName }} 管理员 {{ userName ? userName : '某某' }}先生／女士添加为该公司员工， 首次登录需重新设置。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validate, toastValidate } from '../../../../util/validate';
import { fetchSendValidateCode, fetchCheckValidate } from '../../actions/login';
// import { pageContainer } from '@/helper/plugin';
import { openWindow } from '@/helper';

export default {
  name: 'FirstLogin',
  components: {},
  data() {
    return {
      loginInfo: {},
      sendAuthCode: true, // 判断
      auth_time: 0,
      phone: '',
      validateCode: '',
      deptName: '',
      userName: '',
      params: {},
    };
  },
  created() {},
  mounted() {
    const currentWeb = plus.webview.currentWebview();
    this.params = currentWeb;
    // pageContainer('first-login-content');
    const { phone } = this.params;
    this.phone = `${phone.substr(0, 3)}****${phone.substr(7)}`;
    this.deptName = this.params.deptName;
    this.userName = this.params.userName == 'null' ? '' : this.params.userName;
  },

  methods: {
    // 下一步
    async next() {
      if (!toastValidate('验证码', validate.isNull(this.validateCode))) {
        return false;
      }
      // 校验验证码
      const validateCodeRes = await fetchCheckValidate({
        email: this.params.phone,
        type: 'PHONE',
        cz: 'ZH',
        code: this.validateCode,
      });
      if (validateCodeRes.success) {
        openWindow({
          url: './pages_firstLoginSetPwd/index.html',
          id: '__firstLoginSetPwdView',
          title: '重置密码',
          extras: {
            phone: this.params.phone,
            deptId: this.params.deptId,
            validateCode: this.validateCode,
          },
        });
        /* this.$router.push({
          name: 'firstLoginSetPwd',
          params: {
            phone: this.$route.params.phone,
            deptId: this.$route.params.deptId,
            validateCode: this.validateCode,
          },
        }); */
      } else {
        mui.toast(validateCodeRes.msg);
        return false;
      }
    },
    // 获取验证码
    async getValidateCode() {
      if (this.sendAuthCode) {
        const res = await fetchSendValidateCode({
          email: this.params.phone,
          type: 'PHONE',
          cz: 'ZH',
        });
        mui.toast(res.msg);
        if (res.success) {
          this.sendAuthCode = false;
          this.auth_time = 59;
          const auth_timetimer = setInterval(() => {
            this.auth_time--;
            if (this.auth_time <= 0) {
              this.sendAuthCode = true;
              clearInterval(auth_timetimer);
            }
          }, 1000);
        }
      }
    },
  },
};
</script>
